<template>
    <div class="home-box">
        <el-container class="home-container">
            <!-- 头部区域 -->
            <el-header>
                <div>
                    <span style="font-size: 20px;color: white">汽车后台管理系统</span>
                </div>
                <div>
                    <span style="font-weight: bolder;color: white;font-size: 18px">当前系统时间：{{nowTime}}</span>
                    <iframe style="margin-left: 50px" width="415" scrolling="no" height="50" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=12&icon=1&num=3&site=12"></iframe>
                </div>
                <el-dropdown @command="handleCommand">
                    <el-avatar shape="square" :size="50" :src="user.url"></el-avatar>
                    <span style="font-weight: bolder;color: white">{{user.username}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1" v-text="test"></el-dropdown-item>
                        <el-dropdown-item command="2">修改密码</el-dropdown-item>
                        <el-dropdown-item command="3">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <!-- 页面主体区域 -->
            <el-container>
                <!-- 侧边栏 -->
                <!-- 侧边栏,宽度根据是否折叠进行设置 -->
                <el-aside :width="isCollapse ? '150px':'200px'">
                    <!-- 伸缩侧边栏按钮 -->
                    <div class="toggle-button" @click="toggleCollapse">|||</div>
                    <!-- 侧边栏菜单 -->
                    <el-menu
                            background-color="#333744"
                            text-color="#fff"
                            :collapse="isCollapse"
                            router
                            active-text-color="#ffd04b">
                        <!-- 使用引入的菜单组件，将查询出的菜单数组传入 -->
                        <Menu :menuData="menuList"></Menu>
                    </el-menu>
                </el-aside>
                <!-- 主体结构 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // 引入菜单组件
    import {L2Dwidget} from 'live2d-widget'
    import Menu from '../../components/Menu'
    export default {
        name: "HomePage",
        // 注册组件
        components: {
            Menu
        },
        data(){
            return {
                test: '个人中心',
                isCollapse:true,
                menuList:[],
                user:{
                    username:'',
                    url: ''
                },
                nowTime: ''
            }
        },
        methods: {
            handleCommand(command) {
                if (command ==1) {
                    this.$router.push("/showInfo")
                }
                if (command == 2) {
                    this.$router.push("/updatePwd")
                }
                if (command == 3) {
                    sessionStorage.removeItem("token");
                    this.$router.push("/")
                }
            },
            toggleCollapse(){
                this.isCollapse=!this.isCollapse;
            },
            getUserInfo() {
                this.$axios({
                    method: 'get',
                    url: 'clms-system/user/getUserInfo',
                }).then( result => {
                    this.user = result.data.object
                })
            },
            showUserHasMenu() {
                this.$axios({
                    method: 'get',
                    url: 'clms-system/menu/showUserHasMenu',
                }).then( result => {
                    this.menuList = result.data.listData;
                })
            },
            showTime() {
                var Time=new Date();
                var NowTime=Time.toLocaleString();
                this.nowTime = NowTime;
            }
        },
        created() {
            // 查询用户信息
            this.getUserInfo();
            //初始化菜单
            this.showUserHasMenu();
            setInterval(this.showTime,1000);
            L2Dwidget.init(
                { "model": { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", "scale": 1 },
                    "display": {"superSample": 2,"width": 200,"height": 400,"position": "right","hOffset": 0,"vOffset": 0 },
                  "mobile": { "show": true, "scale": 0.5 },
                  "react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 }
                }
            );
        },
    }
</script>

<style scoped lang="less">
    .home-box{
        height: 100%;
    }
    .home-container {
        height: 100%;
    }
    .el-header{
        background-color:#3C8DBC;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;
        color: white;
        font-size: 20px;
    > div{
        display: flex;
        align-items: center;
    span{
        margin-left: 15px;
    }
    }
    }
    .el-aside{
        background-color:#333744;
        height: 100%;
    .el-menu{
        border-right: none;
    }
    }
    .el-main{
        background-color:#eaedf1;
    }
    .toggle-button{
        display: flex;
        justify-content: center;
        color: white;
    }
</style>